<template>
  <!-- 添加/修改对话框 -->
  <el-dialog
    :visible="dialogVisible"
    width="60%"
    :title="dialogTitle"
    @close="handleClose"
  >
    <!-- 表单项 -->
    <el-form
      :label-position="left"
      label-width="100px"
      :inline="true"
      :model="form"
      :rules="rules"
      ref="form"
    >
      <!-- 表单项定义 -->
      <el-form-item label="酒品名" prop="w_name">
        <el-select
          v-model="form.w_name"
          @change="wineChange"
          placeholder="请选择酒品名"
        >
          <el-option
            v-for="item in winetype"
            :key="item.wineId"
            :label="item.wname"
            :value="item.wineId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户名" prop="username">
        <el-select
          v-model="form.username"
          @change="userChange"
          placeholder="请选择酒品名"
        >
          <el-option
            v-for="item in usertype"
            :key="item.uid"
            :label="item.username"
            :value="item.uid"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="预约日期" prop="reservation_date">
        <el-date-picker
          v-model="form.reservation_date"
          type="date" value-format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="数量" prop="quantity">
        <el-input v-model="form.quantity" type="number"></el-input>
      </el-form-item>
      <el-form-item label="酒精含量" prop="alcohol_content">
        <el-input v-model="form.alcohol_content" type="number" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="图片链接" prop="image_url">
        <el-input
          v-model="form.image_url"
          placeholder="http://example.com/image.jpg" :disabled="true"
        ></el-input>
      </el-form-item>
      <el-form-item label="产地" prop="origin">
        <el-input v-model="form.origin" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input v-model="form.description" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-input v-model="form.type" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="库存" prop="stock_quantity">
        <el-input v-model="form.stock_quantity" :disabled="true" type="number"></el-input>
      </el-form-item>
      <el-form-item label="价格" prop="price">
        <el-input v-model="form.price" type="number" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="年份" prop="vintage_year">
        <el-input v-model="form.vintage_year" type="number" :disabled="true"></el-input>
      </el-form-item>
      <!-- <el-form-item label="分类ID" prop="category_id">
        <el-input v-model="form.category_id" type="number"></el-input>
      </el-form-item> -->
      <!-- Add more form fields as needed -->
    </el-form>

    <!-- 确定和取消按钮 -->
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { Message } from "element-ui";
import { winelist } from "@/api/wine";
import { userAll } from "@/api/account";
import { add, edit } from "@/api/reservation";
export default {
  props: {
    mode: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      dialogVisible: false, // 对话框显示状态
      winetype: [],
      usertype: [],
      left:"left",
      form: {
        w_name: "",
        username: "",
        reservation_date: null,
        quantity: 0,
        alcohol_content: 0,
        image_url: "",
        origin: "",
        created_at: null,
        description: "",
        type: "",
        stock_quantity: 0,
        price: 0,
        vintage_year: 0,
        category_id: 0,
        // Add more fields based on your data model
      },
      rules: {
        w_name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        reservation_date: [
          {
            type: "date",
            required: true,
            message: "请选择预约日期",
            trigger: "change",
          },
        ],
        quantity: [
          {
            type: "number",
            required: true,
            message: "请输入数量",
            trigger: "blur",
          },
        ],
        alcohol_content: [
          {
            type: "number",
            required: true,
            message: "请输入酒精含量",
            trigger: "blur",
          },
        ],
        image_url: [
          { required: true, message: "请输入图片链接", trigger: "blur" },
        ],
        origin: [{ required: true, message: "请输入产地", trigger: "blur" }],
        created_at: [
          {
            type: "datetime",
            required: true,
            message: "请选择创建时间",
            trigger: "change",
          },
        ],
        description: [
          { required: true, message: "请输入描述", trigger: "blur" },
        ],
        type: [{ required: true, message: "请输入类型", trigger: "blur" }],
        stock_quantity: [
          {
            type: "number",
            required: true,
            message: "请输入库存",
            trigger: "blur",
          },
        ],
        price: [
          {
            type: "number",
            required: true,
            message: "请输入价格",
            trigger: "blur",
          },
        ],
        vintage_year: [
          {
            type: "number",
            required: true,
            message: "请输入年份",
            trigger: "blur",
          },
        ],
        category_id: [
          {
            type: "number",
            required: true,
            message: "请输入分类ID",
            trigger: "blur",
          },
        ],
        // Add more rules as needed
      },
    };
  },
  computed: {
    dialogTitle() {
      return this.mode === "add" ? "添加酒品" : "编辑酒品";
    },
  },
  methods: {
    handleDateChange(date) {
      // 将日期格式化为 "yyyy-MM-dd'T'HH:mm:ss.SSSX"
      const formattedDate = this.formatDateToISOString(date);
      this.form.reservation_date = formattedDate;
    },
    formatDateToISOString(date) {
      // 使用 JavaScript 的 Date 对象将日期格式化为 ISO 格式
      return new Date(date).toISOString();
    },
    userChange(){},
    // 处理关闭对话框
    handleClose() {
      this.dialogVisible = false;
    },
    async winelist() {
      const res = await winelist();
      if (res.code == 200) {
        this.winetype = res.data.list.records;
      } else {
        Message(res.message);
      }
    },
    wineChange(value) {
      const selectedwinetype = this.winetype.find(
        (item) => item.wineId === value
      );

      // Update wineLists with selected promotion data
      this.form.volume_ml = selectedwinetype.volumeMl;
      this.form.alcohol_content = selectedwinetype.alcoholContent;
      this.form.discount_percent = selectedwinetype.discountPercent;
      this.form.image_url = selectedwinetype.imageUrl;
      this.form.type = selectedwinetype.type;
      this.form.stock_quantity = selectedwinetype.stockQuantity;
      this.form.price = selectedwinetype.price;
      this.form.origin = selectedwinetype.origin;
      this.form.description = selectedwinetype.description;
      this.form.vintage_year = selectedwinetype.vintageYear;
    },
    async add() {
      const param = {
        quantity: this.form.quantity,
        reservationDate: this.form.reservation_date,
        userId: this.form.username,
        wineId: this.form.w_name,
      };
      const res = await add(param);
      if (res.code == 200) {
        Message(res.message);
      } else {
        Message(res.message);
      }
    },
    async edit() {
      const param = {
        quantity: this.form.quantity,
        reservationDate: this.form.reservation_date,
        userId: this.form.user_id,
        wineId: this.form.wine_id,
        reservationId:this.form.reservation_id
      };
      const res = await edit(param);
      if (res.code == 200) {
        Message(res.message);
      } else {
        Message(res.message);
      }
    },
    // 处理提交表单
    handleSubmit() {
      // 实现添加/修改逻辑，根据需求发送请求等
      if (this.mode == "add") {
        this.add();
      } else {
        this.edit();
      }

      // 提交成功后关闭对话框
      this.dialogVisible = false;
    },
    // 加载用户数据，示例中未实现
    async loadUsers() {
      // 调用后端接口获取用户数据，示例中未实现
      // 将获取到的数据赋值给 this.users
      const res = await userAll(1, 10);
      if (res.code == 200) {
        this.usertype = res.data.user.records;
      }
    },
  },
  mounted() {
    this.winelist();
    this.loadUsers();
  },
};
</script>

<style>
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 190px;
}
</style>